<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网易云</title>
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../iconfont/iconfont.css">
    <link rel="stylesheet" href="../css/webapp.css">

</head>
<body>
    <!--header-->
    <header>
        <i class="iconfont">&#xe62f;</i>
        <form action="">
            <i class="iconfont">&#xe660;</i><input type="text" value="搜索音乐、歌词、电台">
        </form>
        <i class="iconfont">&#xe513;</i>
    </header>

    <!--nav-->
    <nav>
        <a href="">个性推荐</a>
        <a href="">歌单</a>
        <a href="">主播电台</a>
        <a href="">排行榜</a>
    </nav>

    <!--content-->
    <main>
        <section class="content">
            <article class="banner">
                <img src="../images/banner.png" alt="">
            </article>
            <article class="adcontent">
                <!--
                    dl:定义列表
                    dt:定义标签
                    dd:定义内容
                -->
                <dl>
                    <dt class="iconfont">&#xe627;</dt>
                    <dd>私人FM</dd>
                </dl>
                <dl>
                    <dt class="iconfont">&#xe611;</dt>
                    <dd>开启个性推荐</dd>
                </dl>
                <dl>
                    <dt class="iconfont">&#xe513;</dt>
                    <dd>云音乐新歌榜</dd>
                </dl>
            </article>
            <article class="title">
                <aside>
                    <i class="iconfont">&#xe637;</i>
                    <span>推荐歌单</span>
                </aside>
                <aside>
                    <i>更多</i>
                    <span>&gt;</span>
                </aside>
            </article>
            <article class="imglist">
                <dl>
                    <dt>
                        <img src="../images/pic_07.png" alt="">
                    </dt>
                    <dd>网易云音乐</dd>
                </dl>
                <dl>
                    <dt>
                        <img src="../images/pic_09.png" alt="">
                    </dt>
                    <dd>网易云音乐</dd>
                </dl>
                <dl>
                    <dt>
                        <img src="../images/pic_11.png" alt="">
                    </dt>
                    <dd>网易云音乐</dd>
                </dl>
                <dl>
                    <dt>
                        <img src="../images/pic_07.png" alt="">
                    </dt>
                    <dd>网易云音乐</dd>
                </dl>
                <dl>
                    <dt>
                        <img src="../images/pic_09.png" alt="">
                    </dt>
                    <dd>网易云音乐</dd>
                </dl>
                <dl>
                    <dt>
                        <img src="../images/pic_11.png" alt="">
                    </dt>
                    <dd>网易云音乐</dd>
                </dl>
                <dl>
                    <dt>
                        <img src="../images/pic_07.png" alt="">
                    </dt>
                    <dd>网易云音乐</dd>
                </dl>
                <dl>
                    <dt>
                        <img src="../images/pic_09.png" alt="">
                    </dt>
                    <dd>网易云音乐</dd>
                </dl>
                <dl>
                    <dt>
                        <img src="../images/pic_11.png" alt="">
                    </dt>
                    <dd>网易云音乐</dd>
                </dl>

            </article>
            <article class="artfoot"></article>
        </section>
    </main>

    <!--footer-->
    <footer>
        <aside>
            <i class="iconfont">&#xe612;</i>
            <span>发现音乐</span>
        </aside>
        <aside>
            <i class="iconfont">&#xe504;</i>
            <span>我的音乐</span>
        </aside>
        <aside>
            <i class="iconfont">&#xe615;</i>
            <span>朋友</span>
        </aside>
        <aside>
            <i class="iconfont">&#xe504;</i>
            <span>账号</span>
        </aside>

    </footer>

</body>
</html>
